<template>
    <el-dialog title="选择养护任务单" :visible.sync="visible" width="1040px" append-to-body :close-on-click-modal="false">
        <BasePage :show-shadow="false">
            <el-form slot="form" :inline="true" size="medium">
                <el-form-item label="编号">
                    <el-input v-model="query.code" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="项目名称">
                    <el-input v-model="query.itemName" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <BaseButton @click="handleFilter">查询</BaseButton>
                    <BaseButton type="second" @click="handleReset">重置</BaseButton>
                </el-form-item>
            </el-form>
            <BaseTable
                slot="table"
                ref="table"
                v-loading="listLoading"
                row-key="id"
                :data="list"
                :columns="columns"
                highlight-current-row
                class="table-header-row"
                height="284px"
                @selection-change="handleSelectionChange"
            >
                <template #code="{ scope: { row} }">
                    <span class="cursor-pointer text-blue-light" @click="handleDetail(row)">{{ row.code }}</span>
                </template>
                <template #status="{ scope: { row } }">
                    <div :class="statusMapper[row.status].class || ''">
                        {{ statusMapper[row.status].label || '' }}
                    </div>
                </template>
            </BaseTable>
            <Pagination
                slot="pagination"
                :current-page.sync="page.pageNo"
                :page-size.sync="page.pageSize"
                :total="page.total"
                @size-change="getList"
                @current-change="getList"
            />
        </BasePage>
        <div slot="footer" class="dialog-footer">
            <BaseButton type="second" @click="cancel">取消</BaseButton>
            <BaseButton :disabled="multipleSelection.length === 0" @click="handleSubmit">确认</BaseButton>
        </div>
    </el-dialog>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { InspectionPlanStatusLable, InspectionPlanStatus } from '@/config/constants'
import { MaintenanceTaskModel } from '@/models'

export default {
    name: 'OrderListDialog',
    components: {
        BasePage,
    },
    props: {
        id: {
            type: [Number, String],
            default: ''
        },
        code: {
            type: [Number, String],
            default: ''
        },
    },
    data() {
        return {
            InspectionPlanStatusLable,
            InspectionPlanStatus,
            model: new MaintenanceTaskModel(),
            visible: false,
            submitLoading: false,
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            listLoading: false,
            columns: Object.freeze([
                {
                    attrs: {
                        type: 'selection',
                        'reserve-selection': true,
                        width: 70
                    }
                },
                {
                    slot: 'code',
                    attrs: {
                        label: '编号',
                        'show-overflow-tooltip': true,
                        width: 160
                    }
                },
                {
                    attrs: {
                        label: '项目名称',
                        prop: 'itemName',
                        'show-overflow-tooltip': true,
                        'min-width': 140
                    }
                },
                {
                    attrs: {
                        label: '期望完成时限',
                        prop: 'expectedPerformanceTime',
                        'show-overflow-tooltip': true,
                        width: 120
                    }
                },
                {
                    attrs: {
                        label: '公路名称',
                        prop: 'highwayName',
                        'show-overflow-tooltip': true,
                        width: 110
                    }
                },
                {
                    attrs: {
                        label: '方向',
                        prop: 'directionName',
                        'show-overflow-tooltip': true,
                        width: 90
                    }
                },
                {
                    attrs: {
                        label: '养护位置',
                        prop: 'maintainPlaceName',
                        'show-overflow-tooltip': true,
                        'min-width': 140,
                        formatter: (r, c, val) => {
                            if (Number(r.maintainPlace) === 1) {
                                return r.facilitiesName
                            } else if (Number(r.maintainPlace) === 2) {
                                return r.stakeNo
                            } else {
                                return r.startStakeNo + '~' + r.endStakeNo
                            }
                        }
                    }
                },
                {
                    slot: 'status',
                    attrs: {
                        label: '任务单状态',
                        'show-overflow-tooltip': true,
                        width: 120
                    }
                }
            ]),
            list: [],
            query: {
                code: '',
                itemName: '',
                statusList: [4, 5, 6]
            },
            multipleSelection: [],
            isHandlingSelection: false,
        }
    },
    computed: {
        statusMapper() {
            const status = this.$store.getters.types.maintenanceTaskStatus
            console.log(status)
            return status.reduce((acc, cur) => {
                acc[cur.id] = { label: cur.name, class: cur.class }
                return acc
            }, {})
        },
    },
    created () {
        this.$store.dispatch('types/query', 'maintenanceTaskStatus')
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val
            if (val.length > 0 && val[val.length - 1].id !== this.multipleSelection[0].id) {
                this.$refs.table.$refs.table.clearSelection()
                this.$refs.table.$refs.table.toggleRowSelection(val[val.length - 1], true)
            }
        },
        handleDetail(row) {
            // 使用$router的resolve方法来构造目标路由的完整URL
            const targetUrl = this.$router.resolve({
                name: 'DailyMaintenanceTaskDetail',
                query: {
                    id: row.id,
                    code: row.code
                }
            }).href

            // 使用window.open在新标签页中打开该URL
            window.open(targetUrl, '_blank')
        },
        // 取消按钮
        cancel() {
            this.visible = false
        },
        open() {
            this.visible = true
            this.handleReset()
            // 在弹窗打开后使用Vue的nextTick
            this.$nextTick(() => {
                this.$refs.table.$refs.table.clearSelection()
            })
        },
        handleReset() {
            this.query = {
                code: '',
                itemName: '',
                statusList: [4, 5, 6]
            }
            this.handleFilter()
        },
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        getList() {
            this.listLoading = true
            this.model
                .getList({
                    ...this.query,
                    ...this.page,
                    highwayCode: this.code, // 要根据公路和施工单位过滤
                    maintainDepart: this.id
                })
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        handleSubmit() {
            let data = ''
            if (this.multipleSelection.length > 0) {
                const { itemName, id } = this.multipleSelection[0]
                data = { name: itemName, id }
            }
            this.$emit('success', data)
            this.visible = false
        }
    }
}
</script>

<style lang="scss" scoped>
.table-header-row {
    ::v-deep {
        // 把多选功能隐藏，不然在多选和取消时，又会导致数据联动存在问题
        .el-table__header-wrapper .el-checkbox:before {
            content: '选择';
            display: block;
            cursor: default;
            font-weight: bold;
        }
        .el-table__header-wrapper .el-checkbox .el-checkbox__input {
            // visibility: hidden;
            display: none;
        }
    }
}

</style>
